<template>
  <div>
    <h3 class="r-title">本月各项指标统计</h3>

    <div class="row mb-3">
      <div v-for="(item, index) in monthData" :key="index" :class="`col-${item.col || 4} mb-3`">
        <div class="card">
          <div class="p-2 border-bottom-1 d-flex justify-content-between">
            <div>{{ item.title }}</div>
            <div class="text-muted">
              <i class="el-icon-time"></i>
              <span>{{ item.time }}</span>
            </div>
          </div>
          <div class="p-2 d-flex">
            <img v-if="item.icon" class="r-img" :src="item.icon" alt="" />
            <div class="flex-1 d-flex">
              <div class="flex-1 text-center" v-for="(n, j) in item.nums" :key="j">
                <div class="r-num">
                  <span :class="`text-${n.color}`">{{ n.value }}</span>
                  <img class="r-num__img" v-if="n.icon" :src="n.icon" alt="" />
                </div>
                <div>{{ n.label }}</div>
              </div>
            </div>
          </div>
          <div class="p-2 d-flex bg-light">
            <div v-for="(f, k) in item.footer" :key="k" class="flex-1 text-center">{{ f }}</div>
            <span v-if="!item.footer.length">&nbsp;</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { dateFormat } from '@/common/utils/common'

const time = dateFormat(new Date(), 'yyyy年M月')
const upArrow = require('@/bigbank/assets/img/sslo.png')
const downArrow = require('@/bigbank/assets/img/xj.png')

export default {
  components: {},
  props: {},
  data() {
    return {
      monthData: [
        {
          title: '贷款情况(万元)',
          time,
          icon: require('@/bigbank/assets/img/dkqk.png'),
          nums: [
            { label: '环比(%)', value: '12%', color: 'danger', icon: upArrow },
            { label: '增幅(%)', value: '9%', color: 'success', icon: downArrow },
          ],
          footer: ['贷款余额：210 (万元)'],
        },
        {
          title: '用工人数',
          time,
          icon: require('@/bigbank/assets/img/ygrs.png'),
          nums: [
            { label: '环比(%)', value: '32%', color: 'success', icon: downArrow },
            { label: '同比', value: '26', color: 'danger', icon: upArrow },
          ],
          footer: ['用工人数：100 (人)'],
        },
        {
          title: '工资总额(万元)',
          time,
          icon: require('@/bigbank/assets/img/gzze.png'),
          nums: [
            { label: '环比(%)', value: '27%', color: 'danger', icon: upArrow },
            { label: '同比', value: '17', color: 'success', icon: downArrow },
          ],
          footer: ['用工人数：100 (人)'],
        },
        {
          title: '个人所得税',
          time,
          icon: require('@/bigbank/assets/img/grsds.png'),
          nums: [
            { label: '环比(%)', value: '6.2%', color: 'success', icon: downArrow },
            { label: '同比', value: '0.5', color: 'danger', icon: upArrow },
          ],
          footer: ['本月个人所得税：12540 (元)'],
        },
        {
          title: '销售收入 (万元)',
          time,
          icon: require('@/bigbank/assets/img/xssl.png'),
          nums: [{ label: '同比(%)', value: '32%', color: 'danger', icon: upArrow }],
          footer: ['本月销售收入：160 (万元)'],
        },
        {
          title: '利润(万元)',
          time,
          icon: require('@/bigbank/assets/img/lr.png'),
          nums: [{ label: '同比(%)', value: '19%', color: 'success', icon: downArrow }],
          footer: ['本月利润：270 (万元)'],
        },
        {
          title: '企业所得税',
          time,
          icon: require('@/bigbank/assets/img/qysds.png'),
          nums: [
            { label: '环比(%)', value: '2.6%', color: 'success', icon: downArrow },
            { label: '同比', value: '3.1', color: 'danger', icon: upArrow },
          ],
          footer: ['本月企业所得税：96210 (元)'],
        },
        {
          title: '企业所得税',
          time,
          icon: require('@/bigbank/assets/img/xjll.png'),
          nums: [{ label: '同比', value: '43%', color: 'danger', icon: upArrow }],
          footer: ['本月现金流量：15640 (万元)'],
        },
        {
          title: '纳税金额(万元)',
          time,
          icon: require('@/bigbank/assets/img/nsje.png'),
          nums: [
            { label: '环比(%)', value: '1.5%', color: 'danger', icon: upArrow },
            { label: '同比(%)', value: '6.9%', color: 'success', icon: downArrow },
          ],
          footer: ['本月企业所得税：96210 (元)'],
        },
        {
          title: '用电度数(万度)',
          time,
          icon: require('@/bigbank/assets/img/df.png'),
          nums: [
            { label: '环比(%)', value: '2.8%', color: 'success', icon: downArrow },
            { label: '同比(%)', value: '1.7%', color: 'danger', icon: upArrow },
          ],
          footer: ['本月：32', '本月累计：15'],
        },
        {
          title: '用水吨数(百吨)',
          time,
          icon: require('@/bigbank/assets/img/ys.png'),
          nums: [
            { label: '环比(%)', value: '1.6%', color: 'success', icon: downArrow },
            { label: '同比(%)', value: '2.1%', color: 'danger', icon: upArrow },
          ],
          footer: ['本月：61', '本月累计：9'],
        },
        {
          title: '结售汇',
          time,
          icon: require('@/bigbank/assets/img/jsh.png'),
          nums: [
            { label: '环比(%)', value: '2.6%', color: 'success', icon: downArrow },
            { label: '同比(%)', value: '3.1%', color: 'danger', icon: upArrow },
          ],
          footer: ['本月结售汇：5688741 (元)'],
        },
        {
          title: '企业开工率(%)',
          time,
          icon: require('@/bigbank/assets/img/qykgl.png'),
          nums: [
            { label: '开工率(%)', value: '6.3%', color: 'success', icon: downArrow },
            { label: '同比(%)', value: '3.1%', color: 'danger', icon: upArrow },
          ],
          footer: [],
        },
        {
          col: 8,
          title: '贷款形态(万元)',
          time,
          nums: [
            { label: '正常', value: '1204', color: 'success' },
            { label: '关注', value: '3240', color: 'success' },
            { label: '次级', value: '0', color: 'success' },
            { label: '可疑', value: '10', color: 'success' },
            { label: '损失', value: '406', color: 'success' },
            { label: '欠息金额', value: '350', color: 'success' },
          ],
          footer: [],
        },
      ],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
}
</script>

<style lang="scss" scoped>
.r-title {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  color: #222;
  padding-left: 15px;

  &::before {
    content: '';
    background: var(--primary);
    width: 8px;
    height: 17px;
    position: absolute;
    left: 0;
    top: 2px;
    border-radius: 4px;
  }
}
.r-img {
  display: block;
  width: 60px;
  height: 60px;
}
.r-num {
  font-weight: bold;
  font-size: 19px;
  margin: 10px 0;
}
.r-num__img {
  vertical-align: top;
}
</style>
